<template>
    <el-button type="primary" @click="dialogGeneratePaper = true"><el-icon>
            <Plus />
        </el-icon>生成试卷</el-button>
    <el-dialog v-model="dialogGeneratePaper" width="600" title="生成试卷">
        <el-form>
            <el-form-item label="试卷名称">
                <el-input v-model="title" placeholder="输入试卷名称" />
            </el-form-item>
            <el-form-item label="单选题">
                <el-input v-model="single_number" style="width: 240px" type="number" placeholder="输入单选题数量" />
                <el-input v-model="single_score" style="width: 240px; margin-left: 20px" type="number"
                    placeholder="输入单选题分值" />
            </el-form-item>
            <el-form-item label="多选题">
                <el-input v-model="many_number" style="width: 240px" type="number" placeholder="输入多选题数量" />
                <el-input v-model="many_score" style="width: 240px; margin-left: 20px" type="number"
                    placeholder="输入多选题分值" />
            </el-form-item>
            <el-form-item label="填空题">
                <el-input v-model="filling_number" style="width: 240px" type="number" placeholder="输入填空题数量" />
                <el-input v-model="filling_score" style="width: 240px; margin-left: 20px" type="number"
                    placeholder="输入填空题分值" />
            </el-form-item>
            <el-form-item label="简答题">
                <el-input v-model="short_answer_number" style="width: 240px" type="number" placeholder="输入简答题数量" />
                <el-input v-model="short_answer_score" style="width: 240px; margin-left: 20px" type="number"
                    placeholder="输入简答题分值" />
            </el-form-item>
            <el-form-item label="总分值">
                <h3 :style="{ color: account === 100 ? 'blue' : 'red' }">{{ account }}</h3>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker v-model="start_time" @blur="console.log(start_time)" type="datetime"
                    placeholder="选择开始时间" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker v-model="end_time" type="datetime" @blur="console.log(end_time)" placeholder="选择结束时间"
                    format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogGeneratePaper = false">Cancel</el-button>
                <el-button type="primary" @click="generate">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="150" />
        <el-table-column prop="title" label="标题" width="150" />
        <el-table-column label="试卷详情" width="280">
            <template #default="scope">
                <el-text line-clamp="2">
                    <h4 v-for="i in JSON.parse(scope.row.questions_info)">{{ i.title }}:
                        <span v-for="k in i.questions_list">{{ k.title }}</span>
                    </h4>
                </el-text>
                <el-button type="primary" bg text
                    @click="dialog_paper_info = true, paper_info = scope.row">查看详情</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="start_time" label="开始时间" width="150" />
        <el-table-column prop="end_time" label="结束时间" width="150" />
        <el-table-column label="试卷答案" width="280">
            <template #default="scope">
                <el-button text bg type="success"
                    @click="dialogAnswer = true, answer_info = scope.row.answer">查看答案</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialog_paper_info" width="800">
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header" style="text-align: center;">
                <h3 :id="titleId" :class="titleClass">试卷详情</h3>
            </div>
        </template>
        <h3 v-for="i, key in JSON.parse(paper_info.questions_info)">
            <span v-if="i.question_type == '单选题' || i.question_type == '多选题'">
                <span id="index">{{ key + 1 }}、</span><span style="font-size: 14px;">({{ i.question_type }})</span>{{
                    i.title }}<br>
                <div style="margin-top:6px;margin-bottom:10px"><span class="options"
                        v-for="(value, key) in JSON.parse(i.options)">
                        <span style="margin-right:20px;">{{ key }}: {{ value }}</span>
                    </span></div>

            </span>
            <span v-else>
                <div style="margin-top:6px;margin-bottom:10px">
                    <span id="index">{{ key + 1 }}、</span><span style="font-size: 14px;">({{ i.question_type
                        }})</span>{{
                            i.title }}<br>
                </div>

            </span>
        </h3>
    </el-dialog>
    <el-dialog v-model="dialogAnswer" width="800" title="答案详情">
        <h3 v-for="i, key in JSON.parse(answer_info)">
            <div style="margin-top:6px;margin-bottom:6px"><span id="index">{{ key + 1 }}、</span>

                答案： <span style="font-size: 15px;margin-right:10px;" v-if="i.type == '单选题' || i.type == '多选题'"
                    v-for="(k, v) in JSON.parse(i.answer)">{{ k }}</span>
                <span v-else>{{ i.answer }}</span>
            </div>

        </h3>
    </el-dialog>
</template>

<script setup>
import { computed, ref, onMounted } from "vue"
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'
import axios from '../../utils/http.js'
import formatTime from "@/utils/formattime.js"
let start_time = ref(new Date())
let end_time = ref(new Date())
let dialogGeneratePaper = ref(false)
let dialogAnswer = ref(false)
let title = ref('')
let single_number = ref('')
let single_score = ref('')
let many_number = ref('')
let many_score = ref('')
let filling_number = ref('')
let filling_score = ref('')
let short_answer_number = ref('')
let short_answer_score = ref('')
let generateLoading = ref(false)
let dialog_paper_info = ref(false)
let paper_info = ref('')
let answer_info = ref('')
let tableData = ref([])
let account = computed(() => {
    return single_number.value * single_score.value + many_number.value * many_score.value + filling_number.value * filling_score.value + short_answer_number.value * short_answer_score.value
})
function get_paper_list() {
    axios({
        url: '/examination/generate/',
        method: 'GET',
        params: {
            username: localStorage.getItem('username')
        }
    }).then(res => {
        if (res.data.code == 201) {
            ElMessage.success('获取成功')
            tableData.value = res.data.data
            console.log("tableData:", tableData.value);
            for (var i = 0; i < tableData.value.length; i++) {
                tableData.value[i].start_time = formatTime(tableData.value[i].start_time)
                tableData.value[i].end_time = formatTime(tableData.value[i].end_time)
            }
        } else {
            ElMessage.error('获取失败')
        }
    })
}
onMounted(() => {
    get_paper_list()
})
function generate() {
    let is_ok = true
    if (title.value == '') {
        ElMessage.warning('试卷标题不能为空')
    } else if (account.value != 100) {
        ElMessage.warning('试卷总分值必须为100')
    }
    if (account.value == 100 && title.value != '' && is_ok) {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        let data = [
            { title: '单选题', 'number': single_number.value, 'score': single_score.value },
            { title: '多选题', 'number': many_number.value, 'score': many_score.value },
            { title: '填空题', 'number': filling_number.value, 'score': filling_score.value },
            { title: '简答题', 'number': short_answer_number.value, 'score': short_answer_score.value }
        ]
        const filteredData = data.filter(item => {
            return item.number !== "" && item.number !== "0" && item.score !== "" && item.score !== "0";
        });
        axios({
            url: '/examination/generate/',
            method: 'put',
            data: {
                argument: filteredData,
                title: title.value,
                date_range: {
                    start_time: start_time.value,
                    end_time: end_time.value
                }
            },
            params: {
                username: localStorage.getItem('username')
            }
        }).then(res => {
            if (res.data.code == 201) {
                console.log(res.data.data);
                ElMessage.success('试卷生成成功')
            } else {
                ElMessage.error(res.data.msg)
            }
            get_paper_list()
            loading.close()
            dialogGeneratePaper.value = false
        }).catch(err => {
            loading.close()
        })
    }
}
</script>

<style scoped>
.question_title {
    font-size: 14px;
}

#index {
    color: #5FBFFF;
}

.options {
    font-size: 15px;
    margin-top: 20px
}
</style>